<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NexMagic Scholar</title>
    <style>
        html, body {
            height: 100%;

            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="network"></div>
<script src="../js/jquery.min.js"></script>
<script src="../js/echarts/echarts.min.js"></script>
<script src="../js/gAjax.js"></script>
<script>
    /*全屏大小*/
    $("#network").width(document.body.offsetWidth);
    $("#network").height(document.body.offsetHeight);
    var networkChart = echarts.init(document.getElementById("network"));
    var keyword = getUrlParam("keyword");
    gAjax.request("expert/getRelateExpertParam", {queryName: keyword}).then(function (result) {
        var graph = {nodes: [], links: []};
        var i = 0, j = 0;
        var nodesMap = {};
        result.forEach(function (item) {
            if (!nodesMap[item["e.name"]]) {
                nodesMap[item["e.name"]] = i++;
                var sourceNode = {
                    id: nodesMap[item["e.name"]],
                    name: item["e.name"],
                    x: null,
                    y: null,
                    /*draggable: true*/
                };
                graph.nodes.push(sourceNode);

            }
        });

        result.forEach(function (item) {
            if (nodesMap[item["e1.name"]]) {
                var link = {
                    id: j++,
                    source: nodesMap[item["e.name"]],
                    target: nodesMap[item["e1.name"]]
                };
                graph.links.push(link);
            }
        });
        var option = {
            tooltip: {},
            animation: true,
            series: [{
                type: 'graph',
                layout: 'force',
                data: graph.nodes,
                links: graph.links,
                symbolSize: 10,
                roam: true,
                label: {
                    normal: {
                        position: 'right',
                        color: "#000"
                    }
                },
                force: {
                    repulsion: 20
                }
            }]
        };
        networkChart.setOption(option);
    });
</script>
</body>
</html>